<!--
 * @Description  : 登录
 * @Autor        : 杜康
 * @Date         : 2023-03-03 14:18:42 +0800
 * @LastEditors  : 杜康
 * @LastEditTime : 2023-03-16 11:19:03 +0800
-->
<template>
  <div class="login">
    <div class="login-content">
      <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" size="large">
        <div class="login-content-text">账号登录</div>
        <el-form-item label="" prop="userName">
          <el-input
            v-model="ruleForm.userName"
            :minlength="11"
            :maxlength="11"
            placeholder="请输入手机号"
          >
            <template #prepend>
              <el-icon>
                <UserFilled />
              </el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="" prop="password">
          <el-input
            v-model="ruleForm.password"
            type="password"
            show-password
            placeholder="请输入密码"
            @keyup.enter="handlerLogin(ruleFormRef)"
          >
            <template #prepend>
              <el-icon>
                <Lock />
              </el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="handlerLogin(ruleFormRef)" type="primary">登&nbsp;&nbsp;录</el-button>
          <el-button @click="handlerReset(ruleFormRef)">重&nbsp;&nbsp;置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script setup>
import { reactive, ref } from "vue";
import { UserFilled, Lock, Key, Hide, View } from "@element-plus/icons-vue";
import { useRouter, useRoute } from "vue-router";
import { telPattern } from "@/utils/regExVerify.js";
const router = useRouter();
const route = useRoute();

const formSize = ref("default");
const ruleFormRef = ref();
// 登录表单
const ruleForm = reactive({
  userName: "",
  password: ""
});

const rules = reactive({
  userName: [
    { required: true, message: "请输入手机号", trigger: "blur" },
    { min: 11, max: 11, message: "手机号长度不正确, 手机号长度是11位", trigger: "blur" },
    { pattern: telPattern, message: `请输入正确的手机号`, trigger: "blur" }
  ],
  password: [
    {
      required: true,
      message: "请输入密码",
      trigger: "change"
    }
  ]
});

// 重置按钮
const handlerReset = (formEl) => {
  console.log("[ formEl ] >", formEl);
  if (!formEl) return;
  formEl.resetFields();
};
// 登录按钮
const handlerLogin = async (formEl) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      router.push({
        path: "/dashboard"
      });
    } else {
      console.log("error submit!", fields);
    }
  });
};
</script>

<style lang="less" scoped>
.login {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;

  &-content {
    position: relative;
    border-radius: 6px;
    width: 428px;
    height: 300px;
    background-color: rgba(255, 255, 255);
    box-sizing: border-box;
    box-shadow: 0 0 25px #cac6c6;

    &-text {
      position: relative;
      height: 32px;
      line-height: 32px;
      font-size: 24px;
      font-weight: bold;
      margin-bottom: 24px;
      text-align: center;
    }

    .el-form {
      margin: 32px 54px;

      .el-form-item {
        margin-bottom: 24px !important;
        display: flex;
        .el-button {
          flex: 1;
          font-size: 18px;
        }
      }
    }
  }
}
</style>
